<template>
  <div style="margin: 10px 0">
    <div style="margin-bottom: 30px">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>维修记录查看</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <h2>维修记录 <i class="el-icon-s-tools"></i></h2>
    <el-divider></el-divider>
    <el-button type="primary" @click="handleAdd" class="mr-5">新增维修记录<i class="el-icon-circle-plus-outline"></i>
    </el-button>
    <div class="block">
      <el-timeline :reverse="true">
        <el-timeline-item v-for="repair in repairs" :timestamp="repair.repairDate" placement="top">
          <el-card>
            <el-button type="success" class="info"><i class="el-icon-view" @click="showInfo(repair)"></i>查看详情
            </el-button>
            <el-descriptions title="维修记录详情" direction="vertical" :column="4" border>
              <el-descriptions-item label="维修单编号">{{ repair.repairId }}</el-descriptions-item>
              <el-descriptions-item label="维修地址">{{ repair.address }}</el-descriptions-item>
              <el-descriptions-item label="维修原因">{{ repair.reason }}</el-descriptions-item>
              <el-descriptions-item label="受理人">{{ repair.acceptor }}</el-descriptions-item>
              <el-descriptions-item label="维修工">
                <template v-if="repair.staffBasicInfo">
                  {{ repair.staffBasicInfo.trueName }}</template>

              </el-descriptions-item>
              <el-descriptions-item label="开始维修时间">{{ repair.repairDate }}</el-descriptions-item>
              <el-descriptions-item label="完成维修时间">{{ repair.finishDate }}</el-descriptions-item>
              <el-descriptions-item label="状态">{{ repair.status }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ repair.remark }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <el-dialog title="新增维修记录" :visible.sync="dialogFormVisible" width="50%" :close-on-click-modal="false">
      <h4>物料消耗</h4><br/>
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm"
               label-width="100px" class="demo-dynamic" :rules="rules">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
                v-for="(domain, index) in dynamicValidateForm.domains" label="● 物料"
                :key="domain.key"
                :prop="'domains.' + index + '.value'"
                :rules="{required: true, message: '物料不能为空', trigger: 'blur'}">
              <el-select v-model="domain.value" placeholder="请选择维修物资" style="width: 185px"
                         @change="materialChange">
                <el-option
                    v-for="item in materials"
                    :key="item.id"
                    :label="item.name+' 库存：'+item.stock"
                    :value="item.id">
                </el-option>
              </el-select>
              <el-input-number v-model="domain.num" @change="handleChange" :min="1"
                               label="描述文字"></el-input-number>
              <el-button @click.prevent="removeDomain(domain)" class="ml-5">删除</el-button>
            </el-form-item>
            <div style="text-align: center">
              <el-button @click="addDomain" type="primary">新增物料</el-button>
            </div>
          </el-col>
          <el-col :span="12" style="border-left: #b5b7bb solid 1px">
            <el-form-item label="维修车辆" prop="vehicleId" label-width="100px">
              <el-select v-model="vehicleId" placeholder="请选择维修车辆">
                <el-option
                    v-for="item in vehicles"
                    :key="item.id"
                    :label="item.vehicleId"
                    :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="维修地址" label-width="100px" prop="address">
              <el-input v-model="address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="工时费" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.worktimeBills" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入场时间" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.inTime" autocomplete="off" type="date"></el-input>
            </el-form-item>
            <el-form-item label="出场时间" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.outTime" autocomplete="off" type="date"></el-input>
            </el-form-item>
            <el-form-item label="出厂检修人" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.outCheckPeople" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="经手人" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.handlePeople" autocomplete="off"></el-input>
            </el-form-item>


            <el-form-item label="维修工" label-width="100px" prop="driver">
              <el-select v-model="vehicleRepair.repairman">
                <el-option v-for="repairman in repairmans"
                           :value="repairman.staffId"
                           :key="repairman.staffId"
                           :label="repairman.trueName">
                </el-option>
              </el-select>
            </el-form-item>


            <el-form-item label="维修原因" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.reason" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="备注" label-width="100px" prop="driver">
              <el-input v-model="vehicleRepair.remark" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false">取 消</el-button>
        <el-button type="primary" @click="save('dynamicValidateForm')">{{ btnText }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Repairman",
  data() {
    return {
      dialogFormVisible: false,
      dynamicValidateForm: {
        domains: [{
          value: '',
          num: 1,
        }],
      },
      vehicleRepair: {},
      btnText: '',
      materials: [],
      repairs: [],
      vehicles: [],
      vehicleId: 0,
      address: '',
      repairmans: [],
      rules: {},
    }
  },
  created() {
    this.load()
  },
  methods: {
    load() {
      request.get("/materialInfo/get").then(res => {
        this.materials = res.data
      })
      request.get("/repair/get").then(res => {
        this.repairs = res.data.records
        console.log(this.repairs)
      })
      request.get("/vehicleInfo/get").then(res => {
        this.vehicles = res.data
      })
      request.get("/staff/repair/emp").then(res => {
        this.repairmans = res.data
      })
    },
    handleAdd() {
      this.btnText = "添加"
      this.address = ''
      // this.vehicleRepair={}
      this.dialogFormVisible = true
    },
    showInfo(repair) {

    },
    materialChange(index) {
      console.log(index)
      // this.dynamicValidateForm.domains[index].max=stock
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
      });
    },
    handleChange(value) {
      console.log(value);
    },
    save(dynamicValidateForm) {
      var array = []
      array[0] = this.dynamicValidateForm.domains
      array[1] = this.vehicleRepair
      array[2] = this.vehicleId
      array[3] = this.address
      this.$refs[dynamicValidateForm].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          request.post("repair/add", array).then(res => {
            if (res) {
              this.$message.success("添加成功")
              this.load()
            } else {
              this.$message.error("添加失败")
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>
.block {
  margin-top: 30px;
  width: 80%;
}

.info {
  float: right;
  top: 10px;
  right: 20px;
  padding: 10px;
}

</style>